<template>
    <div class="dialogs" v-show="isOpen">
        <span @click="$emit('closeDialog')">&lt;返回</span>
        <div class="content">
            <audio src="http://cdnbbbd.shoujiduoduo.com/bb/audio/a48/141/3577141.aac" controls v-timeupdate:[type]="curTime"></audio>
            <div class="list" ref="content">
                <ul>
                    <li v-for="(item,i) in songlist" :key="i" @click="playSong(item.time)"
                        :class="{'active':curIndex===i}"
                        :ref="'lis'+i"
                    >
                        {{item.text}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import request from '@/utils/request'
export default {
    name:'dialogs',
    props:['isOpen'],
    data(){
        return {
            songlist:[], //歌词
            curTime:0,  //当前的时间
            curIndex:-1, //当前歌词的index
            type:'click'
        }
    },
    created(){
        request.get('/songTxt').then(res => {
            this.songlist = this.formatData(res);
            console.log(this.songlist);
        })
    },
    watch:{
        curTime(val){
            this.songlist.forEach((item,key) => {
               if(item.time <= val && val < this.songlist[key+1].time){
                    this.curIndex = key;
                }
            })
        },
        curIndex(val){
            //1.获取盒子高度
            let contentHeight = this.$refs.content.offsetHeight;
            //2.获取当前歌词距离盒子顶部的距离
            console.log(this.$refs['lis'+val][0])
            let curOffsetTop = this.$refs['lis'+val][0].offsetTop;

            console.log(curOffsetTop);

            this.$refs.content.scrollTop = (curOffsetTop-contentHeight/2);
        }
    },
    methods:{
        formatData(str){
            /* eslint-disable no-useless-escape */
            str = str.replace(/\<\d+\,\-?\d+\>/g,''); //<122,-1212>

            let reg = /\[(\d{2}\:\d{2}\.\d{2})\]([^\[]+)/g;  //非

            let list = [];

            str.replace(reg,($1,$2,$3) => {
                console.log($1,$2,$3);  //$2  01:53.52
                //时间单位===》毫秒
                let [f,m] = $2.split(':');  //[01,53.52]
                console.log(f,m)
                list.push({
                    time:parseInt(parseInt(f)*60*1000 + parseFloat(m)*1000),
                    text:$3
                })
            })
            list.push({
                time:Infinity,
                text:''
            })
            return list
        },
        playSong(time){
            this.type = 'click';
            this.curTime = time;
        }
    }
}
</script>

<style scoped>
    .dialogs{
        width:100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
        z-index:999;
        background: #fff;
        display:flex;
        flex-direction: column;
    }

    .content{
        width:100%;
        flex:1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .list{
        width:100%;
        flex:1;
        overflow: auto;
    }

    .list li{
        width:100%;
        text-align: center;
        padding:5px 0;
    }

    .active{
        color:red;
    }
</style>

